<template>
  <div class="specialalbum">
    <div class="main">
      <div style="display:flex;">
        <img :src="blurPicUrl" alt="">
        <div class="personalinformation">
          <div style="display:flex;align-items: center;">
            <span style="border:1px solid red;color:red;height: 20px;font-size: 12px;">专辑</span>
            <p style="font-size:25px;font-weight: 700;margin-left: 10px;">{{albumname}}</p>
          </div>
          <div style="display:flex;margin-top: 10px;">
            <div class="quanbu">
              <i class="iconfont icon-bofanganniu"></i>
              <span style="margin-left:10px;">播放全部</span>
              <i class="iconfont icon-jiahao1" style="margin-left:10px"></i>
            </div>
            <div class="shouc">
              <i class="iconfont icon-shoucangjia"></i>
              <span style="margin-left:10px;">收藏({{subCount}})</span>
            </div>
            <div class="xiazai">
              <i class="iconfont icon-xiazai"></i>
              <span style="margin-left:5px;">下载全部</span>
            </div>
            <div class="fengx">
              <i class="iconfont icon-fenxiang"></i>
              <span style="margin-left:5px;">{{shareCount}}</span>
            </div>
          </div>
          <div class="geshou">
            <span style="font-size:12px;">歌手:</span>
            <span class="span1">{{artistname}}</span>
          </div>
          <div class="shij">
            <span style="font-size:12px">时间:</span>
            <span style="font-size:12px;margin-left:7px;">{{time}}</span>
          </div>
        </div>
      </div>
      <div class="gequxqing">
        <span @click="getspan1(index)" class="span1" :class="show==index?'p':''" v-for="(item,index) in arr" :key="index">{{item}}</span>
      </div>
      <Albumsongs v-if="show==0" />
      <Albumreview v-else-if="show==1" />
      <Albumdetails v-else-if="show==2" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Albumsongs from '@/components/Specialalbum/Albumsongs.vue'
import Albumreview from '@/components/Specialalbum/Albumreview.vue'
import Albumdetails from '@/components/Specialalbum/Albumdetails.vue'
export default {
  name: 'Specialalbum',
  data() {
    return {
      show: 0,
      arr: ['歌曲列表', '评论', '专辑详情'],
      blurPicUrl: '',
      albumname: '',
      artistname: '',
      subCount: '',
      shareCount: '',
      time: ''
    }
  },
  computed: {
    ...mapState({
      commentCount: state => state.search.commentCount,
      albumsongs: state => state.search.albumsongs
    })
  },
  components: {
    Albumsongs,
    Albumreview,
    Albumdetails
  },
  methods: {
    getspan1(e) {
      this.show = e
    }
  },
  watch: {
    albumsongs: {
      handler(v, o) {
        this.blurPicUrl = v.album.blurPicUrl
        this.albumname = v.album.name
        this.artistname = v.album.artist.name
        let d = new Date(v.album.publishTime)
        let f = d.getFullYear()
        let n = d.getMonth() + 1
        let t = d.getDate()
        this.time = f + '-' + n + '-' + t
      }
    },
    commentCount: {
      handler(v, o) {
        this.subCount = v.subCount
        this.shareCount = v.shareCount
      }
    }
  }
}
</script>

<style lang="less" scoped>
.specialalbum {
  // margin-left: 300px;
  margin-left: -110px;
  margin-top: 20px;
  .main {
    img {
      width: 180px;
      height: 180px;
      border-radius: 5px;
    }
    .personalinformation {
      margin-left: 30px;
      .quanbu {
        color: #fff;
        background-color: rgb(233, 59, 59);
        border-radius: 25px;
        // height: 30px;
        padding: 5px 15px;
      }
      .quanbu:hover {
        cursor: pointer;
        background-color: rgb(224, 26, 26);
      }
      .shouc {
        border: 1px solid #bebcbc;
        border-radius: 25px;
        display: flex;
        align-items: center;
        padding: 1px 10px;
        margin-left: 10px;
      }
      .shouc:hover {
        cursor: pointer;
        background-color: #f5efef;
      }
      .xiazai {
        border: 1px solid #bebcbc;
        border-radius: 25px;
        display: flex;
        align-items: center;
        padding: 1px 10px;
        margin-left: 10px;
      }
      .xiazai:hover {
        cursor: pointer;
        background-color: #f5efef;
      }
      .fengx {
        border: 1px solid #bebcbc;
        border-radius: 25px;
        display: flex;
        align-items: center;
        padding: 1px 10px;
        margin-left: 10px;
      }
      .fengx:hover {
        cursor: pointer;
        background-color: #f5efef;
      }
      .geshou {
        margin-top: 20px;
        .span1 {
          color: blue;
          font-size: 13px;
          margin-left: 5px;
          opacity: 0.8;
        }
        .span1:hover {
          opacity: 1;
        }
      }
      .shij {
        display: flex;
        margin-top: 10px;
      }
    }
    .gequxqing {
      margin-top: 40px;
      .span1 {
        font-size: 17px;
        margin-left: 30px;
      }
      .span1:hover {
        cursor: pointer;
      }
      .p {
        font-weight: 700;
        font-size: 19px;
      }
    }
  }
}
</style>